<!DOCTYPE HTML>
<html>
<head>
    {include file="common:meta"}
</head>
<body>
<div class="page-container">
    <div class="ibox-content" id="toolbar">
        <form action="" class="form-inline"  data-url="">
            <div class="form-group">
                <label class="control-label">
                    <label class="control-label">开始时间：
                        <input type="text" class="form-control date-search" id="start_time" placeholder="">
                    </label>
                </label>
            </div>
            <div class="form-group">
                <label class="control-label">
                    <label class="control-label">结束时间：
                        <input type="text" class="form-control date-search" id="end_time" placeholder="">
                    </label>
                </label>
            </div>
            <div class="form-group">
                <label class="control-label" for="key">请选择:</label>
                <select id="key" class="form-control" name="key">
                    <option value="horn_id">ID</option>
                    <option value="horn_name">消耗品名称</option>
                    <option value="type">属性</option>
                </select>
            </div>

            <div class="form-group">
                <label class="control-label" for="value">输入:</label>
                <input class="form-control" id="value" type="text" name="value">
            </div>

            <button type="button" class="btn btn-primary" id="eventQuery">查询</button>
            <button type="button" onclick="location.replace(location.href);" class="btn btn-success ">刷新</button>
        </form>
    </div>
    <div class=" float-e-margins">
        <div class="ibox-content">
            <div class="tabs-container">
                <ul class="nav nav-tabs">
                    <li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true">消耗品列表</a>
                    </li>
                    <li class=""><a data-toggle="tab" href="#tab-2" aria-expanded="false">消耗品添加</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class=" tab-pane active" id="tab-1">
                        <table id="tb_departments"></table>
                    </div>
                    <div class=" tab-pane" id="tab-2">
                        <div class="ibox-content">
                            <form class="form-horizontal" id="form" data-url="/ConsumeAdd">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label" for="horn_name">
                                        <span class="c-red">*</span>消耗品名称：
                                    </label>
                                    <div class="col-md-2 col-sm-10">
                                        <input type="text" class="form-control" id="horn_name" value="" name="horn_name">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label" for="horn_url">
                                        <span class="c-red">*</span>消耗品展示图：
                                    </label>
                                    <div class="col-md-2 col-sm-10">
                                        <input type="file" class="form-control" id="horn_url" value="" name="horn_url">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label" for="horn_animation">
                                        <span class="c-red">*</span>消耗品动画：
                                    </label>
                                    <div class="col-md-2 col-sm-10">
                                        <input type="file" class="form-control" id="horn_animation" name="horn_animation">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label" for="type">
                                        <span class="c-red">*</span>类型：
                                    </label>
                                    <div class="col-md-2 col-sm-10">
                                        <div class="radio i-checks">
                                            <label><input type="radio"  name="type" value="1"> <i></i> 普通</label>
                                            <label><input type="radio" name="type"  value="2"> <i></i> 非卖品</label>
                                        </div>
                                    </div>
                                </div><div class="form-group">
                                <label class="col-sm-2 control-label" for="is_putaway">
                                    <span class="c-red">*</span>限时上架：
                                </label>
                                <div class="col-md-2 col-sm-10">
                                    <div class="radio i-checks">
                                        <label><input type="radio"  name="is_putaway" value="1"> <i></i> 是</label>
                                        <label><input type="radio" name="is_putaway"  value="0"> <i></i> 否</label>
                                    </div>
                                </div>
                            </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label" for="horn_type">
                                        <span class="c-red">*</span>消耗品类型：
                                    </label>
                                    <div class="col-md-2 col-sm-10">
                                        <div class="radio i-checks">
                                            <label><input type="radio" name="horn_type"  value="1"> <i></i>小喇叭</label>
                                            <label><input type="radio" name="horn_type"  value="2"> <i></i>大喇叭</label>
                                            <label><input type="radio" name="horn_type"  value="3"> <i></i>其他</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label" for="price">
                                        <span class="c-red">*</span>价格：
                                    </label>
                                    <div class="col-md-2 col-sm-10">
                                        <input type="number" class="form-control" id="price" value="" name="price">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label" for="is_discount">
                                        <span class="c-red">*</span>打折：
                                    </label>
                                    <div class="col-md-2 col-sm-10">
                                        <input type="number" class="form-control" id="is_discount" value="" name="is_discount" placeholder="只输入数值">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label" for="sort">
                                        <span class="c-red">*</span>权重：
                                    </label>
                                    <div class="col-md-2 col-sm-10">
                                        <input type="number" class="form-control" id="sort" value="" name="sort">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2">
                                        <button class="btn btn-primary" type="button" onclick="commonSubmit(this)">添加
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{include file="common:footer"}
<script>
    $(document).ready(function () {
        initTable();
    });

    function initTable() {
        $('#tb_departments').bootstrapTable({
            url: '/ConsumeIndexData',         //请求后台的URL（*）
            dataField: "data",
            method: 'post',                      //请求方式（*）
            striped: true,                      //是否显示行间隔色
            cache: true,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,                   //是否显示分页（*）
            queryParams: queryParams,//传递参数（*）
            showToggle: true,
            showRefresh: true,
            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            pageNumber: 1,                       //初始化加载第一页，默认第一页
            pageSize: 10,                       //每页的记录行数（*）
            pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
            showColumns: true,                  //是否显示所有的列
            showPaginationSwitch: true,
            minimumCountColumns: 2,             //最少允许的列数
            toolbar: '#toolbar',
            columns: [{
                field: 'horn_id',
                title: 'ID',
                sortable: true
            }, {
                field: 'horn_name',
                title: '消耗品名称',
                editable:{
                    type:'text',
                    title:'消费品名称'
                }
            }, {
                field: 'horn_img',
                title: '消耗品示图',
                formatter: function (value, row, index) {
                    return '<img  src="' + row.horn_img + '" class="img-responsive" width="10%">';
                },
                visible: true
            }, {
                field: 'type',
                title: '属性',
                editable:{
                    type:'text',
                    title:'属性'
                }
            }, {
                field: 'horn_type',
                title: '消耗品类型',
                editable:{
                    type:'text',
                    title:'消耗品类型'
                }
            },{
                field: 'price',
                title: '价格',
                editable:{
                    type:'text',
                    title:'价格'
                }
            },{
                field: 'is_putaway',
                title: '限时上架(是/否)',
                editable:{
                    type:'text',
                    title:'限时上架'
                }
            }, {
                field: 'is_discount',
                title: '打折力度',
                formatter: function (value, row, index) {
                    return row.is_discount + '%';
                },
                editable:{
                    type:'text',
                    title:'打折力度'
                }
            }, {
                field: 'create_time',
                title: '创建时间'
            }],
            //保存的使用
            onEditableSave: function (field, row, oldValue, $el) {
                //可进行异步操作
                $.ajax({
                    type: "post",
                    url: "/ConsumeEdit",
                    data: row,
                    dataType: 'JSON',
                    success: function (re) {
                        if (re.code === 1) {
                            layer.msg(re.msg, {icon: 1, time: 2000});
                        } else {
                            layer.alert(re.msg);
                        }
                    },
                    error: function () {
                        alert('编辑失败');
                    },
                    complete: function () {

                    }

                });
            }
        });
    }

    //得到查询的参数

    function queryParams(params) {
        params.offset = params.offset / params.limit + 1;
        params.key = $('#key').val();
        params.value = $('#value').val();
        params.start_time = $('#start_time').val();
        params.end_time = $('#end_time').val();
        return params;
    }

    // 搜索按钮触发事件
    $(function () {
        $("#eventQuery").click(function () {
            $('#tb_departments').bootstrapTable(('refresh'));	// 很重要的一步，刷新url！
        });
    });

    //时间搜索插件
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        lay('.date-search').each(function () {
            laydate.render({
                elem: this,
                type: 'datetime',
                trigger: 'click'
            });
        });
    });
</script>
</body>
</html>